<template>
  <v-container fluid class="flex p-3 h-full w-full" style="padding: 0px">
    <div class="overflow-auto p-1 grow-0 shrink-0 h-full bg-white"
      :style="{ width: layoutStore.sideBar ? '260px' : '0px' }">
      <!-- <v-list nav dense>
        <v-list-item-group
          @change="onSelectSortChange"
          v-model="selectSortActive"
          color="primary"
        >
          <v-list-item v-for="(item, i) in sortList" :key="i">
            <v-list-item-icon>
              <v-icon>mdi-folder</v-icon>
            </v-list-item-icon>

            <v-list-item-content>
              <v-list-item-title>{{ item.name }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list> -->
      <!-- <el-tree
        ref="sortTreeComponent"
        node-key="key"
        :accordion="true"
        :highlight-current="true"
        :data="apiStore.sortList"
        :props="defaultProps"
        :default-expanded-keys="[apiStore.key]"
        @node-click="apiStore.onNodeClick"
      ></el-tree> -->
      <v-dialog v-model="createMenuVisible" max-width="600px">
        <v-card class="p-4">
          <el-form ref="createNodeForm" :model="createNodeForm" label-position="left" label-width="90px" size="small">
            <el-form-item label="名称" prop="name">
              <el-input v-model="createNodeForm.name"></el-input>
            </el-form-item>
            <el-form-item>
              <div class="text-right">
                <el-button @click="onCreateNodeSubmit" type="success">创建</el-button>
              </div>
            </el-form-item>
          </el-form>
        </v-card>
      </v-dialog>
      <v-dialog v-model="createApiDocVisible" max-width="600px">
        <v-card class="p-4">
          <el-form ref="createNodeForm" :model="createNodeForm" label-position="left" label-width="90px" size="small">
            <el-form-item label="创建方式">
              <el-radio-group v-model="createNodeForm.createType">
                <el-radio label="0">新建</el-radio>
                <el-radio label="1">关联</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="createNodeForm.createType === '1'" label="父级接口" prop="docParentId">
              <el-cascader v-model="createNodeForm.docParentId" :props="createProps" ref="createComponent">
                <template slot-scope="{ node, data }">
                  <div @click="onCreateNodeChange(data, node)">
                    {{ data.name }}
                  </div>
                </template>
              </el-cascader>
            </el-form-item>
            <el-form-item v-if="createNodeForm.createType === '0'" label="名称" prop="name">
              <el-input v-model="createNodeForm.name"></el-input>
            </el-form-item>
            <el-form-item v-if="createNodeForm.createType === '0'" label="接口路径">
              <div class="flex">
                <el-select v-model="createNodeForm.method">
                  <el-option v-for="item in methodOptions" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                <el-input v-model="createNodeForm.path"></el-input>
              </div>
            </el-form-item>

            <el-form-item v-if="createNodeForm.createType === '0'" label="状态">
              <el-select v-model="createNodeForm.statusId">
                <el-option v-for="item in apiStore.statusOptions" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="text-right">
                <el-button @click="onCreateNodeSubmit" type="success">创建</el-button>
              </div>
            </el-form-item>
          </el-form>
        </v-card>
      </v-dialog>
      <v-dialog v-model="createQuickDocVisible" max-width="600px">
        <v-card class="p-4">
          <el-form ref="createNodeForm" :model="createNodeForm" label-position="left" label-width="90px" size="small">
            <el-form-item label="名称" prop="name">
              <el-input v-model="createNodeForm.name"></el-input>
            </el-form-item>
            <el-form-item label="路径">
              <div class="flex">
                <el-select v-model="createNodeForm.method">
                  <el-option v-for="item in methodOptions" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                <el-input v-model="createNodeForm.path"></el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="text-right">
                <el-button @click="onCreateNodeSubmit" type="success">创建</el-button>
              </div>
            </el-form-item>
          </el-form>
        </v-card>
      </v-dialog>
      <v-dialog v-model="renameVisible" max-width="600px">
        <v-card class="p-4">
          <el-form ref="renameNodeForm" :model="renameForm" label-position="left" label-width="90px" size="small">
            <el-form-item label="名称" prop="summary">
              <el-input v-model="renameForm.summary"></el-input>
            </el-form-item>
            <el-form-item>
              <div class="text-right">
                <el-button @click="onRenameNodeSubmit" type="success">修改</el-button>
              </div>
            </el-form-item>
          </el-form>
        </v-card>
      </v-dialog>
      <v-dialog v-if="moveVisible" v-model="moveVisible" max-width="600px">
        <v-card class="p-4">
          <el-form ref="moveNodeForm" :model="moveForm" label-position="left" label-width="90px" size="small">
            <el-form-item label="目标目录" prop="summary">
              <el-cascader v-model="moveForm.targetTreeId" :props="moveProps" ref="moveComponent">
                <template slot-scope="{ node, data }">
                  <div @click="onMoveNodeChange(data, node)">
                    {{ data.name }}
                  </div>
                </template>
              </el-cascader>
            </el-form-item>
            <el-form-item>
              <div class="text-right">
                <el-button @click="onMoveNodeSubmit" type="success">修改</el-button>
              </div>
            </el-form-item>
          </el-form>
        </v-card>
      </v-dialog>
      <v-dialog  @input="(val) => { envTabActive = 'env' }" v-if="layoutStore.env" v-model="layoutStore.env" width="80%">
        <v-card class="p-4 overflow-auto" style="max-height: 80vh; min-height: 620px;">
          <el-tabs v-model="envTabActive">
            <el-tab-pane label="环境管理" name="env">
              <env-component v-if="envTabActive === 'env'" />
            </el-tab-pane>
            <el-tab-pane label="Swagger管理" name="swagger">
              <swagger-component v-if="envTabActive === 'swagger'" />
            </el-tab-pane>
          </el-tabs>
        </v-card>
      </v-dialog>
      <div class="flex items-center">
        <el-input size="small" v-model="keywords" clearable @input="onInputSearch"
          prefix-icon="el-icon-search"></el-input>
        <el-popover placement="right" width="400" trigger="click">
          <el-form :form="searchForm">
            <el-form-item label="搜索类型">
              <el-select v-model="searchForm.searchType">
                <el-option label="全部" value="ALL"></el-option>
                <el-option label="目录" value="MENU"></el-option>
                <el-option label="接口" value="DOC"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="reference" style="line-height: 32px; width: 32px; height: 32px; border: 1px solid #DCDFE6;"
            class="cursor-pointer shrink-0 rounded mx-1 text-center box-border">
            <i style="font-size: 16px" class="el-icon-collection"></i>
          </div>
        </el-popover>
      </div>
      <el-tree v-if="apiStore.apiTreeRootId" ref="treeComponent" :data="apiStore.treeList" node-key="id"
        :load="onFetchLazyTreeNode" :filter-node-method="onFilterNode" :props="treeProps" highlight-current
        @node-click="onNodeClick" draggable @node-drag-start="onDragStart" @node-drop="onDrop"
        @node-drag-over="onDragHover" :allow-drop="allowDrop" :allow-drag="allowDrag">
        <span class="w-full text-sm overflow-auto" slot-scope="{ node, data }">
          <span class="hover-root flex items-center">
            <i v-if="data.id === apiStore.startMenuRootId" class="el-icon-collection me-2"></i>
            <i v-else-if="data.type === 0" class="el-icon-folder-opened me-2"></i>
            <i v-else-if="data.type === 1" class="el-icon-document me-2"></i>
            <span class="me-4 text-ellipsis overflow-hidden">{{
              data.name
            }}</span>
            <span v-if="data.treeType === 1" @click.stop class="hover-display ms-auto me-2">
              <el-tooltip class="item" content="添加接口" placement="top">
                <i v-if="data.type === 0" @click="onCreateNode(data, node, 1)"
                  class="rounded hover:bg-slate-200 p-1 el-icon-plus cursor-pointer"></i>
              </el-tooltip>
              <el-dropdown placement="bottom-start">
                <i class="rounded hover:bg-slate-200 p-1 el-icon-more cursor-pointer ms-2"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="onCreateNode(data, node, 1)" v-if="data.type === 0"
                    icon="el-icon-plus">添加接口</el-dropdown-item>
                  <el-dropdown-item v-if="
                    ![
                      apiStore.apiMenuRootId,
                      apiStore.quickReqMenuRootId,
                      apiStore.startMenuRootId,
                    ].includes(data.id)
                  " icon="el-icon-edit" @click.native="onRenameNode(data, node)">重命名</el-dropdown-item>
                  <el-dropdown-item v-if="data.type === 1" icon="el-icon-document-copy">复制</el-dropdown-item>
                  <el-dropdown-item v-if="
                    ![
                      apiStore.apiMenuRootId,
                      apiStore.quickReqMenuRootId,
                      apiStore.startMenuRootId,
                    ].includes(data.id)
                  " @click.native="onMoveNode(data, node)" icon="el-icon-news">移动到</el-dropdown-item>
                  <el-dropdown-item @click.native="onCreateNode(data, node, 0)" divided icon="el-icon-folder-add"
                    v-if="data.type === 0">添加子目录</el-dropdown-item>
                  <el-dropdown-item class="hover-delete" divided icon="el-icon-delete" v-if="
                    ![
                      apiStore.apiMenuRootId,
                      apiStore.quickReqMenuRootId,
                      apiStore.startMenuRootId,
                    ].includes(data.id)
                  " @click.native="onDeleteQuickNode(data, node)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
            <span v-if="data.treeType === 2" @click.stop class="hover-display ms-auto me-2">
              <el-tooltip class="item" content="添加快捷请求" placement="top">
                <i v-if="data.type === 0" @click="onCreateQuickNode(data, node, 1)"
                  class="rounded hover:bg-slate-200 p-1 el-icon-plus cursor-pointer"></i>
              </el-tooltip>
              <el-dropdown placement="bottom-start">
                <i class="rounded hover:bg-slate-200 p-1 el-icon-more cursor-pointer ms-2"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="onCreateQuickNode(data, node, 1)" v-if="data.type === 0"
                    icon="el-icon-plus">添加快捷请求</el-dropdown-item>
                  <el-dropdown-item v-if="
                    ![
                      apiStore.apiMenuRootId,
                      apiStore.quickReqMenuRootId,
                      apiStore.startMenuRootId,
                    ].includes(data.id)
                  " @click.native="onRenameNode(data, node)" icon="el-icon-edit">重命名</el-dropdown-item>
                  <el-dropdown-item v-if="data.type === 1" @click.native="onCopyNode(node)"
                    icon="el-icon-document-copy">复制</el-dropdown-item>
                  <el-dropdown-item v-if="
                    ![
                      apiStore.apiMenuRootId,
                      apiStore.quickReqMenuRootId,
                      apiStore.startMenuRootId,
                    ].includes(data.id)
                  " @click.native="onMoveNode(data, node)" icon="el-icon-news">移动到</el-dropdown-item>
                  <el-dropdown-item @click.native="onCreateQuickNode(data, node, 0)" divided icon="el-icon-folder-add"
                    v-if="data.type === 0">添加子目录</el-dropdown-item>
                  <el-dropdown-item class="hover-delete" divided icon="el-icon-delete" v-if="
                    ![
                      apiStore.apiMenuRootId,
                      apiStore.quickReqMenuRootId,
                      apiStore.startMenuRootId,
                    ].includes(data.id)
                  " @click.native="onDeleteQuickNode(data, node)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </span>
        </span>
      </el-tree>
    </div>
    <div class="h-100 shrink-0" style="width: 1px; background-color: #eceef2"></div>
    <div class="flex flex-col overflow-auto">
      <el-tabs class="overflow-auto flex-auto bg-white p-2 relative" @tab-click="onTabClick" @edit="onAddTab"
        v-model="apiStore.tabActive" :before-leave="beforeLeave" type="card">
        <el-tab-pane :key="item.key" v-for="(item, index) in apiStore.tabList" :label="item.title" :name="item.key"
          closable>
          <detail-component v-if="item.treeType === 1" />
          <quick-component v-else-if="item.treeType === 2" />
          <index-component v-else />
        </el-tab-pane>
        <el-tab-pane name="__plus__" label="+" :closable="false"> </el-tab-pane>
      </el-tabs>
      <div class="w-100 shrink-0" style="height: 1px; background-color: #eceef2"></div>
      <div class="flex items-center bg-white" style="height: 32px; flex-grow: 0">
        <div class="cursor-pointer" @click="onToggleSideBar">
          <i v-if="!layoutStore.sideBar" class="el-icon-d-arrow-right"></i>
          <i v-else class="el-icon-d-arrow-left"></i>
        </div>
      </div>
    </div>
  </v-container>
</template>

<script>
import { useApiStore } from "@/store/api";
import { useLayoutStore } from "@/store/layout";
import { lazyTree } from "@/api/api";
import IndexComponent from "./children/index/index.vue";
import QuickComponent from "./children/quick/index.vue";
import DetailComponent from "./children/detail/index.vue";
import {
  nextTick,
  onMounted,
  reactive,
  ref,
  toRef,
  watch,
} from "@vue/composition-api";
import router from "../../../../router";
import EnvComponent from "@/views/project/children/setup/children/env/index.vue";
import SwaggerComponent from "@/views/project/children/setup/children/swagger/index.vue"
export default {
  components: {
    QuickComponent,
    DetailComponent,
    IndexComponent,
    EnvComponent,
    SwaggerComponent
  },
  setup() {
    const methodOptions = ["GET", "POST", "PUT"];
    const apiStore = useApiStore();
    const layoutStore = useLayoutStore();
    console.log(apiStore);
    const defaultProps = {
      children: "children",
      label: "label",
    };
    const sortTreeComponent = ref(null);
    const treeComponent = ref(null);
    window.com = treeComponent;
    onMounted(() => {
      // watch(toRef(apiStore, "key"), (val) => {
      //   nextTick(() => {
      //     sortTreeComponent.value.setCurrentKey(val);
      //   });
      // });
      apiStore.treeComponent = treeComponent;
    });
    // apiStore.fetchSortList();

    const createMenuVisible = ref(false);
    const createApiDocVisible = ref(false);
    const createQuickDocVisible = ref(false);
    function onCreateNode(data, node, type) {
      if (type === 0) {
        createMenuVisible.value = true;
      } else if (type === 1) {
        createApiDocVisible.value = true;

        let tmpNode = node;
        let isQuick = false;
        while (tmpNode) {
          if (apiStore.quickReqMenuRootId === tmpNode.data.id) {
            isQuick = true;
            break;
          }
          tmpNode = tmpNode.parent;
        }
        if (isQuick) {
          createNodeForm.isQuick = true;
        }
      }

      createNodeForm.type = type;
      createNodeForm.parentData = data;
      createNodeForm.parentNode = node;
      createNodeForm.component = treeComponent.value;
      ["name", "path", "method", "tagId", "statusId"].forEach((key) => {
        createNodeForm[key] = "";
      });
    }
    function onCreateQuickNode(data, node, type) {
      if (type === 0) {
        createMenuVisible.value = true;
      } else if (type === 1) {
        createQuickDocVisible.value = true;
      }

      createNodeForm.type = type;
      createNodeForm.parentData = data;
      createNodeForm.parentNode = node;
      createNodeForm.component = treeComponent.value;
      ["name", "path", "method", "tagId", "statusId"].forEach((key) => {
        createNodeForm[key] = "";
      });
    }
    function onCreateNodeSubmit() {
      if (createNodeForm.createType === "0") {
        apiStore.createTreeSubNode(createNodeForm).then(() => {
          createApiDocVisible.value =
            createMenuVisible.value =
            createQuickDocVisible.value =
            false;
        });
      } else {
        apiStore.unitedTreeSubNode(createNodeForm).then(() => {
          createApiDocVisible.value =
            createMenuVisible.value =
            createQuickDocVisible.value =
            false;
        });
      }
    }
    const createNodeForm = reactive({
      component: null,
      parentData: null,
      parentNode: null,
      name: "",
      type: 0,

      path: "",
      method: "",
      statusId: "",

      docParentId: null,
      createType: "0",
    });

    const treeProps = {
      label: "name",
      children: "children",
      isLeaf: "leaf",
    };

    function onFetchLazyTreeNode(node, resolve) {
      apiStore.fetchLazyTree(node, resolve);
    }

    function onNodeClick(data, node, component) {
      apiStore.treeNodeClick(data, node, component);
    }

    function debounce(callback, ms) {
      let timer = null
      return function () {
        clearTimeout(timer)
        timer = setTimeout(() => {
          callback()
        }, ms)
      }
    }

    const searchForm = reactive({
      searchType: 'ALL'
    })

    watch(toRef(searchForm, 'searchType'), () => {
      filterFun()
    })

    function onFilterNode(value, data) {
      if (!value) {
        return true;
      }
      if (searchForm.searchType === 'ALL') {
        return data.name.indexOf(value) !== -1;
      } else if (searchForm.searchType === 'MENU') {
        if (data.id) {
          let node = treeComponent.value.getNode(data.id).parent
          while (node && node.data.name) {
            if (node.data.name.indexOf(value) !== -1) {
              console.log(node)
              return true
            }
            node = node.parent
          }
        }
        return data.type === 0 && data.name.indexOf(value) !== -1;
      } else if (searchForm.searchType === 'DOC') {
        return data.type === 1 && data.name.indexOf(value) !== -1;
      }

    }
    const keywords = ref('')
    const filterFun = debounce(() => {
      treeComponent.value.filter(keywords.value)
    }, 500)
    function onInputSearch() {
      filterFun()
    }

    function onDeleteQuickNode(data, node) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        apiStore.deleteTreeSubNode(node).then((res) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    }

    const renameForm = reactive({
      data: null,
      node: null,
      summary: "",
    });
    const renameVisible = ref(false);

    function onRenameNode(data, node) {
      renameForm.data = data;
      renameForm.node = node;
      renameForm.summary = data.name;
      renameVisible.value = true;
    }

    function onRenameNodeSubmit() {
      apiStore
        .renameTreeSubNode(renameForm.node, renameForm.summary)
        .then(() => {
          renameVisible.value = false;
        });
    }

    const moveVisible = ref(false);
    const moveComponent = ref(null);
    const moveForm = reactive({
      node: null,
      targetTreeId: "",
      treeType: "",
    });
    function onMoveNode(data, node) {
      moveForm.targetTreeId = null;
      moveForm.treeType = data.treeType;
      moveForm.node = node;
      moveVisible.value = true;
    }
    function onMoveNodeChange(data, node) {
      console.log(data);
      console.log(node);
      // node.doCheck(data.id)
      console.log(moveComponent.value);
      // moveForm.targetTreeId = [data.id]
      moveComponent.value.toggleDropDownVisible();
      moveComponent.value.checkedValue = node.pathNodes.map(
        (item) => item.data.id
      );
    }
    function onMoveNodeSubmit() {
      apiStore
        .moveTreeNode(
          moveForm.node,
          moveForm.targetTreeId[moveForm.targetTreeId.length - 1]
        )
        .then(() => {
          moveVisible.value = false;
        });
    }
    function onCopyNode(node) {
      apiStore.copyTreeNode(node);
    }
    const moveProps = {
      label: "name",
      value: "id",
      expandTrigger: "hover",
      // multiple: true,
      checkStrictly: true,
      lazy: true,
      lazyLoad(node, resolve) {
        console.log(node);
        const { level } = node;
        let parentId = null;
        if (level === 0) {
          parentId =
            moveForm.treeType === 1
              ? apiStore.apiMenuRootId
              : apiStore.quickReqMenuRootId;
        } else {
          parentId = node.data.id;
        }
        lazyTree({ parentId }).then((res) => {
          const data = res.data;
          const list = data
            .filter((item) => item.type === 0)
            .map((item) => ({
              children: [],
              leaf: item.type === 1 || item.subSize === 0,
              ...item,
            }));
          if (level === 0) {
            if (moveForm.treeType === 1) {
              list.unshift({
                id: apiStore.apiMenuRootId,
                children: [],
                leaf: true,
                name: "接口",
              });
            } else if (moveForm.treeType === 2) {
              list.unshift({
                id: apiStore.quickReqMenuRootId,
                children: [],
                leaf: true,
                name: "快捷请求",
              });
            }
          }
          resolve(list);
        });
      },
    };

    function onDragHover(draggingNode, dropNode, ev) {
      console.log(ev);
      // ev.dataTransfer.dropEffect = 'none'
      // ev.dataTransfer.effectAllowed = 'move'
    }

    function allowDrop(draggingNode, dropNode, type) {
      if (type !== "inner") {
        if (draggingNode.data.treeType === 2 && dropNode.data.treeType === 2) {
          if (draggingNode.data.parentId === dropNode.data.parentId) {
            return true;
          }
        }
        if (draggingNode.data.treeType === 1 && dropNode.data.treeType === 1) {
          if (draggingNode.data.parentId === dropNode.data.parentId) {
            return true;
          }
        }
      }
      return false;
    }

    function allowDrag(draggingNode) {
      if (
        (draggingNode.data.treeType === 2 &&
          draggingNode.data.id !== apiStore.quickReqMenuRootId) ||
        (draggingNode.data.treeType === 1 &&
          draggingNode.data.id !== apiStore.apiMenuRootId)
      ) {
        return true;
      }
      return false;
    }

    function onDragStart() { }

    function onDrop(draggingNode, dropNode, dropType, ev) {
      if (dropType === "prev") {
        dropNode = dropNode.previousSibling;
      } else if (dropType === "next") {
        dropNode = dropNode.nextSibling;
      }
      apiStore.swapTreeNode(draggingNode).then(() => {
        this.$message.success("swap success");
      });
    }

    function onAddTab(name, action) {
      if (action === "add") {
        apiStore.addTab("开始", Date.now() * -1 + "");
      } else {
        apiStore.removeTab(name);
      }
    }

    function onTabClick(tab) {
      apiStore.tabClick(tab.name);
    }

    function onToggleSideBar() {
      layoutStore.toggleSideBar();
    }

    function beforeLeave(activeName) {
      if (activeName === "__plus__") {
        apiStore.addTab("开始", Date.now() * -1 + "");
        return false;
      }
      return true;
    }

    const createProps = {
      label: "name",
      value: "apiDocId",
      expandTrigger: "hover",
      // multiple: true,
      checkStrictly: true,
      lazy: true,
      lazyLoad(node, resolve) {
        console.log(node);
        const { level } = node;
        let parentId = null;
        if (level === 0) {
          parentId =
            createNodeForm.parentData.treeType === 1
              ? apiStore.apiMenuRootId
              : apiStore.quickReqMenuRootId;
        } else {
          parentId = node.data.id;
        }
        if (!node.root && node.data.type === 1) {
          resolve([]);
        }
        lazyTree({ parentId }).then((res) => {
          const data = res.data;
          const list = data
            // .filter((item) => item.type === 0)
            .map((item) => ({
              children: [],
              leaf: item.type === 1 || item.subSize === 0,
              ...item,
            }));
          if (level === 0) {
            if (createNodeForm.parentData.treeType === 1) {
              list.unshift({
                id: apiStore.apiMenuRootId,
                children: [],
                leaf: true,
                name: "接口",
              });
            } else if (createNodeForm.parentData.treeType === 2) {
              list.unshift({
                id: apiStore.quickReqMenuRootId,
                children: [],
                leaf: true,
                name: "快捷请求",
              });
            }
          }
          resolve(list);
        });
      },
    };

    const createComponent = ref(null);

    function onCreateNodeChange(data, node) {
      createComponent.value.toggleDropDownVisible();
      createComponent.value.checkedValue = node.pathNodes.map(
        (item) => item.data.id
      );
      createNodeForm.docParentId = data.apiDocId;
    }

    const envTabActive = ref('env')

    return {
      layoutStore,
      methodOptions,
      apiStore,
      defaultProps,
      sortTreeComponent,
      createNodeForm,
      treeProps,
      onFetchLazyTreeNode,
      createMenuVisible,
      onCreateNode,
      treeComponent,
      searchForm,
      onFilterNode,
      onNodeClick,
      keywords,
      onInputSearch,
      onFilterNode,
      onCreateNodeSubmit,
      createApiDocVisible,
      onCreateQuickNode,
      createQuickDocVisible,
      onDeleteQuickNode,
      renameForm,
      renameVisible,
      onRenameNode,
      onRenameNodeSubmit,
      moveVisible,
      moveComponent,
      moveForm,
      onMoveNodeSubmit,
      moveProps,
      onMoveNode,
      onMoveNodeChange,
      onCopyNode,

      allowDrop,
      allowDrag,
      onDragStart,
      onDragHover,
      onDrop,

      onAddTab,
      onTabClick,

      onToggleSideBar,

      beforeLeave,

      createComponent,
      createProps,
      onCreateNodeChange,

      envTabActive
    };
  },
};
</script>

<style scoped>
.hover-display {
  display: none;
}

.hover-root:hover .hover-display {
  display: block;
}

.hover-delete:hover {
  background-color: rgb(255 237 213) !important;
  color: rgb(234 88 12) !important;
}
</style>